/**
 * @Title: index.js
 * @Description: index 默认页面
 * @author: Fanchao
 * @date: 2020/8/4 9:07 下午
 * @version V1.0
 */
import React, { useEffect, useState } from "react";
import styles from "./index.less";
import SectionTitle from "components/SectionTitle";
import { Col, Row, Table, Button, Modal, Form, Input, message } from "antd";
import { connect, history } from "umi";
import storageUtils from "utils/storage";
import { changeMyPassword } from "api/index";

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
};
const Home = ({ home: { dataSource }, dispatch, loading }) => {
    const [visible, setVisible] = useState(false);
    const userInfo = storageUtils.getUser() || {};
    const [form] = Form.useForm();
    useEffect(() => {
        dispatch({
            type: "home/getDataSource",
            payload: {}
        });
    }, []);
    const columns = [
        {
            title: "序号",
            align: "left",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: "消息标题",
            dataIndex: "title",
            align: "left"
        },
        {
            title: "消息内容",
            dataIndex: "content",
            align: "left"
        },
        {
            title: "创建时间",
            dataIndex: "createTime"
        }
    ];
    const updateMyPassword = () => {
        setVisible(true);
    };
    const updateMyPasswordSubmit = async (values) => {
        const result = await changeMyPassword(values);
        if (result.status === "success") {
            message.success(`修改成功:新密码为 ${values.newPassword}`);
            setVisible(false);
            storageUtils.saveRouteList([]);
            storageUtils.savePermissions({ visit: [] });
            storageUtils.saveUser({});
            storageUtils.saveIsInit(false);
            storageUtils.saveIsLogin(false);
            storageUtils.saveToken({});
            setTimeout(() => {
                history.push("/login");
            }, 100);
        }
    };
    return (
        <div className={styles.homeContainer}>
            <div className={styles.homeHeader}>
                <SectionTitle title={"我的信息"}/>
                <Row>
                    <Col span={4}>
                        <span className={styles.label}>姓名：</span>
                        <span className={styles.value}>{userInfo.realName}</span>
                    </Col>
                    <Col span={4}>
                        <span
                            className={styles.label}> {userInfo.userRoleTypes.includes("Student") ? "学号" : "证件号"}：</span>
                        <span className={styles.value}>{userInfo.credentialsNo}</span>
                    </Col>
                    <Col span={4}>
                        <span className={styles.label}> 登录账号：</span>
                        <span className={styles.value}>{userInfo.loginId}</span>
                        <Button style={{ padding: "0", marginLeft: "16px" }} type="link"
                                onClick={updateMyPassword}>修改密码</Button>
                    </Col>
                </Row>
            </div>
            <div className={styles.homeTableContainer}>
                <SectionTitle title={"任务提醒"}/>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource}
                    pagination={false}
                />
            </div>
            <Modal
                title="修改密码"
                visible={visible}
                onOk={() => {
                    form.validateFields().then(values => {
                        if (values.newPassword === values.oldPassword) {
                            message.warning("新密码与旧密码一致，请重新输入");
                            return;
                        }
                        updateMyPasswordSubmit(values);
                    }).catch(info => {
                    });
                }}
                onCancel={() => {
                    setVisible(false);
                    form.resetFields();
                }}
            >
                <Form
                    {...layout}
                    layout="horizontal"
                    form={form}
                    name="basic"
                    // 表单默认值，只有初始化以及重置时生效 莫用
                    initialValues={{
                        // name: itemData.name
                    }}
                >
                    <Form.Item
                        label="旧密码"
                        name="oldPassword"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入原始密码"/>
                    </Form.Item>
                    <Form.Item
                        label="新密码"
                        name="newPassword"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入新密码"/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default connect(({ home, dispatch, loading }) => ({
    home,
    dispatch,
    loading: loading.effects["home/getDataSource"]
}))(Home);
